<template>
  <v-container>
    <v-row>
      <v-col>
        <v-card>
          <v-card-text>
            <v-alert outlined type="warning" prominent border="left">
              目标：商场收银软件，营业员根据客户所购买的商品单价和数量，向客户收费。
              商场有打折活动所有商品打指定折扣
            </v-alert>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <v-card>
          <v-card-title>
            商场收银软件 V2.1
          </v-card-title>
          <v-card-text class="mt-2">
            <v-row>
              <v-col cols="12" md="6">
                <v-text-field
                  type="number"
                  label="单价"
                  prefix="￥"
                  v-model="currentPrice"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field type="number" label="数量" v-model="currentNum" />
              </v-col>
              <v-col cols="12">
                <v-select :items="cbxItems" label="折扣" v-model="selectCBX" />
              </v-col>
              <v-col cols="12">
                <v-textarea
                  readonly
                  rows="5"
                  label="显示信息"
                  outlined
                  no-resize
                  v-model="outString"
                />
              </v-col>
              <v-col cols="12" class="text-h5"> 总计：{{ totalPrice }} </v-col>
            </v-row>
          </v-card-text>
          <v-card-actions>
            <v-btn class="primary" outlined dark @click="onSaveClick"
              >保存</v-btn
            >
            <v-btn class="secondary" outlined dark>重置</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import {
  CashContext,
  CashNormal,
  CashRebate,
  CashReturn
} from "@/design-pattern/02-strategy/CashV04";

@Component({})
export default class PageV4 extends Vue {
  // region Prop
  // endregion
  // region Data
  currentPrice = 0.0;
  currentNum = 0;
  outString = "";
  totalPrice = 0;
  cbxItems = ["正常收费", "满300返100", "打八折"];
  selectCBX = "";
  // endregion
  // region computed
  // endregion
  // region watch
  // endregion
  // region method
  onSaveClick() {
    let context: CashContext | null = null;

    switch (this.selectCBX) {
      case "正常收费":
        context = new CashContext(new CashNormal());
        break;
      case "满300返100":
        context = new CashContext(new CashReturn(300, 100));
        break;
      case "打八折":
        context = new CashContext(new CashRebate(0.8));
        break;
    }

    if (context) {
      const currentTotalPrice = context.GetResult(
        this.currentPrice * this.currentNum
      );
      this.totalPrice = currentTotalPrice + this.totalPrice;

      this.outString += `单价：${this.currentPrice}  数量：${this.currentNum}  ${this.selectCBX}  合计：${currentTotalPrice} \n`;
    }
  }
  // endregion
  // region hook
  // endregion
}
</script>

<style lang="scss"></style>
